<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>侧边栏</title>
    <link href="lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/file-manage.css">

    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!-- 进行切换的按钮，data-target 对应responsive-navbar的ID -->
            <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- font-family: 华文新魏; -->
            <a href="#" class="navbar-brand" style="font-size: 18px;"><span
                    class="glyphicon glyphicon-cloud"></span>&ensp;&ensp;<strong>空投管理</strong></a>
        </div>
        <!-- div.collapse.navbar-collapse -->
        <!-- 再定义一个id，叫做响应式导航栏 -->
        <div action="" class="collapse navbar-collapse" id="responsive-navbar">
            <ul class="nav navbar-nav">
                <!-- li*3>a -->
                <!--
                <li class="active"><a href="#">首页</a></li>
                <li id="mine_link" style="display: none;"><a href="mine.html">我的</a></li>
                <li><a href="about.html">关于</a></li>
                -->
            </ul>

            <!-- 加上一个profile来包装登录注册的ul的nav -->
            <div class="profile navbar-right">
                <!-- 加上登录或者注册：靠右 -->
                <ul class="nav navbar-nav" id="login_before" style="display: none;">
                    <!-- 加上tabindex为1，当我打开此页面的时候，按下tab就从登录按钮开始 -->
                    <li><a href="" tabindex="1" data-toggle="modal" data-target="#login-modal">登录</a></li>
                    <li><a href="" tabindex="2" data-toggle="modal" data-target="#register-modal">注册</a></li>
                </ul>
                <ul class="nav navbar-nav" id="login_after" style="display: block;">
                    <li><a href="" tabindex="1" data-toggle="modal" data-target="#mine-info-modal">我的账户</a></li>
                    <li><a href="#" id="logout">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>


<!-- container-fluid -->
<div class="container">
    <!-- col-sm-4 col-md-3 -->
    <div class="col-md-3">
        <div class="panel-group" id="panelContainer">
            <div class="panel panel-default">
                <div id="header1" class="panel-heading" data-toggle="collapse" data-target="#sub1"
                     data-parent="#panelContainer">
                    <i class="glyphicon glyphicon-book"></i>&nbsp;
                    <a href="#">空投管理</a>
                    <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                </div>
                <div id="sub1" class="collapse panel-collapse">
                    <div class="panel-body">
                        <ul class="nav">
                            <li>
                                <a href="#"><span></span>下载排</a>
                            </li>
                            <li>
                                <a href="#">大小排</a>
                            </li>
                            <li>
                                <a href="#">时间排</a>
                            </li>
                            <li>
                                <a href="#">...</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div id="header2" class="panel-heading" data-toggle="collapse" data-target="#sub2"
                     data-parent="#panelContainer">
                    <i class="glyphicon glyphicon-user"></i>&nbsp;
                    <a href="#">用户管理</a>
                    <span class="glyphicon glyphicon-triangle-right pull-right"></span>
                </div>
                <div id="sub2" class="collapse panel-collapse">
                    <div class="panel-body">
                        <ul class="nav">
                            <li>
                                <a href="#">会员用户管理</a>
                            </li>
                            <li>
                                <a href="#">普通用户管理</a>
                            </li>
                            <li>
                                <a href="#">用户注销</a>
                            </li>
                            <li>
                                <a href="#">用户激活</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- col-sm-8 col-md-9 -->
    <div class="col-md-9 right-panel">
        <!-- style="margin-top: 10px;"  -->
        <div class="panel panel-default" style="margin-top: 14px;">
            <!-- Default panel contents -->
            <!--<div class="panel-heading" style="border-radius: 3px;">Panel heading</div>-->
            <!--
            <div class="panel-body">
                <p>...</p>
            </div>
-->
            <!-- Table -->
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>Student-ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Grade</th>
                    <th>pro</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>001</td>
                    <td>Rammohan</td>
                    <td>Reddy</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Smita</td>
                    <td>Pallod</td>
                    <td>A</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Rabindranath</td>
                    <td>Sen</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>001</td>
                    <td>Rammohan</td>
                    <td>Reddy</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Smita</td>
                    <td>Pallod</td>
                    <td>A</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Rabindranath</td>
                    <td>Sen</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>001</td>
                    <td>Rammohan</td>
                    <td>Reddy</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Smita</td>
                    <td>Pallod</td>
                    <td>A</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Rabindranath</td>
                    <td>Sen</td>
                    <td>A+</td>
                    <td>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <nav aria-label="Page navigation" style="text-align: center;">
            <ul class="pagination pagination-md">
                <li class="disabled">
                      <span>
                        <span aria-hidden="true">&laquo;</span>
                      </span>
                </li>
                <li class="active">
                    <span>1 <span class="sr-only">(current)</span></span>
                </li>

                <li><a href="#">2</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>


</div>
<footer class="container-fluid foot-wrap">
    <!--采用container，使得页尾内容居中 -->
    <div class="container">
        <div class="row" id="footer">
            <!-- col-xs-6 -->
            <div class="row-content col-xs-6 col-md-3 ">
                <!--友情链接-->
                <h3 class="footer_header">FRIENDSHIP</h3>
                <ul>
                    <li><a href="http://blog.mzywucai.club">五彩的博客</a></li>
                    <li><a href="https://blog.csdn.net/qq_36791569">五彩的CSDN</a></li>
                    <li><a href="https://gitee.com/mzy1998">五彩的码云</a></li>
                    <li><a href="http://123.207.17.21:21814/">五彩的资源平台</a></li>
                </ul>
            </div>
            <!-- col-xs-6 -->
            <div class="row-content col-xs-6 col-md-3 ">
                <!--浏览-->
                <h3 class="footer_header">SITE</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Mine</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <div class="clearfix" id="footer-control"></div>
            <!-- col-xs-6 -->
            <div class="row-content col-xs-6 col-md-3 ">
                <h3 class="footer_header">ABOUT</h3>
                <ul>
                    <li><a href="#">
                        People are inevitably born with self-pity. Only by staying awake at all times can we see where
                        the value of truth lies.
                        <br>
                        Life is too long to do nothing, but too short to do something. These years, I have been
                        reminding myself that one thing, do not move myself. Most people seem to work hard, but it's
                        just a uploadResult of stupidity.
                    </a></li>
                </ul>
            </div>
            <!-- col-xs-6 -->
            <div class="row-content col-xs-6 col-md-3 ">
                <h3 class="footer_header">CONCAT</h3>
                <ul>
                    <li><a href="mailto:mzywucai@foxmail.com"><span class="glyphicon glyphicon-envelope"></span> <span>mzywucai@foxmail.com</span></a>
                    </li>
                </ul>

            </div>
        </div><!--/.row -->
    </div><!--/.container-->

    <p align="center" style="margin-top: 20px;color:#878B91;font-family: 华文新魏;">
        Copyright ©2019 MZYWUCAI | PowerBy blog.mzywucai.club
    </p>

</footer>


<script>
    $(function () {
        $(".panel-heading").on("click", function (e) {
            var idLength = e.currentTarget.id.length;
            var index = e.currentTarget.id.substr(idLength - 1, idLength);
            $("#sub" + index).on('hidden.bs.collapse', function () {
                $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
                $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
            })
            $("#sub" + index).on('shown.bs.collapse', function () {
                $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
                $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
            })
        })

        $(".panel-body > .nav > li > a").on("click", function (e) {
            alert(e.currentTarget.textContent);
        });
    });
</script>
</body>

</html>